<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>员工入职管理</title>
		<meta http-equiv="content-Type" content="text/html;charset=gb2312">
		<script src="../js/DateJS.js" type="text/javascript">
		</script>

	</head>
	<style type="text/css">
		body {
			background-color: #3994EE;
			text-align: center;
		}
		
		.div1 {
			background-image: url(img/1.png);
			width: 118px;
			height: 60px;
			color: #F6F6F6;
			float: left;
		}
		
		.div1:hover {
			background-image: url(img/2.png);
		}
		
		.div1:active {
			background-image: url(img/3.png);
		}
		
		a {
			text-decoration: none;
		}
		
		.div2 {
			height: 1px;
		}
		
		.div3 {
			border: #0CF solid 2px;
			height: 600px;
			margin-top: 65px;
			padding-top: 10px;
			background-color: #E7FEED;
		}
		
		.div3_left {
			padding: 0px;
			margin: 0px;
			margin-top: 70px;
			padding-right: 15px;
			width: 190px;
			height: 400px;
			float: left;
			list-style: none;
		}
		
		.div3_right {
			padding: 0px;
			margin: 0px;
			float: left;
			list-style: none;
		}
		
		.div3_right2 {
			padding: 0px;
			margin: 0px;
			padding-top: 5px;
			padding-left: 15px;
			float: left;
			list-style: none;
		}
		
		.input1 {
			background-color: #EEA6AD;
		}
	</style>

	<body>
		<div id="app">
			<div class="div2">
				<table width="472" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<td width="118">
							<a href="yggl1.html">
								<div class="div1" style=" background-color:#F90">
									<h4 style="text-align:center; line-height:0"> 员工入职管理</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="ygxxcx.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 员工信息中心</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="ygyd1.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 员工异动管理</h4>
								</div>
							</a>
						</td>
						<td width="118">
							<a href="yggl4.html">
								<div class="div1">
									<h4 style="text-align:center; line-height:0"> 员工离职管理</h4>
								</div>
							</a>
						</td>
					</tr>
				</table>
			</div>
			<div class="div3" align="center">
				<form onsubmit="return false;">
					<table width="822px" height="390px" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td width="110" rowspan="13" align="center" valign="middle">
								<h1>员<br />
									工<br />
									入<br />
									职<br />
									信<br />
									息<br />
									填<br />
									写</h1>
							</td>
							<td width="96" height="30" align="right" valign="middle">员工号：</td>
							<td width="188" align="left" valign="middle">
								<input type="number" name="id" v-model="employmentInformation.id" disabled="disabled" />
								<font color="#FF0000">*员工号自动添加*</font><span id="nomspan"></span>
							</td>
							<td width="113" height="30" align="right" valign="middle">姓名：</td>
							<td width="193" align="left" valign="middle">
								<input type="text" name="userName" v-model="employmentInformation.user_name">
								<font color="#FF0000">*</font> <span id="namespan"></span>
							</td>
							<td width="122">
								<font color="#FF0000" size="-1">注意：" * "为必填项</font>
							</td>
						</tr>

						<tr>
							<td height="30" align="right" valign="middle">性别：</td>
							<td align="left" valign="middle">
								<select name="gender" v-model="employmentInformation.gender">
									<option value="男"> 男 </option>
									<option value="女"> 女 </option>
								</select>
								<font color="#FF0000">*</font><span id="sexspan"></span>
							</td>

							<td height="30" align="right" valign="middle">出生日期：</td>

							<td align="left" valign="middle">
								<input type="date" style="border:1px solid #999;" v-model="employmentInformation.birthday" />
								<font color="#FF0000">*</font><span id="birthdayspan"></span>
							</td>

							<td>&nbsp;</td>
						</tr>

						<tr>
							<td height="30" align="right" valign="middle">身高：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.height">
							</td>
							<td height="30" align="right" valign="middle">身份证号：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.id_card_number">
								<font color="#FF0000">*</font><span id="IDspan"></span>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td width="96" height="30" align="right" valign="middle">部门：</td>
							<td width="188" align="left" valign="middle">
								<!--获取数据库中的部门信息，并下拉框显示-->
								<select v-model="employmentInformation.department">

									<option value="销售部">销售部</option>

									<option value="市场部">市场部</option>

									<option value="创意部">创意部</option>

									<option value="人事部">人事部</option>

									<option value="管理部">管理部</option>

									<option value="部门测试">部门测试</option>

								</select>
								<!-------------------------------------->
								<font color="#FF0000">*</font><span id="deptspan"></span>
							</td>
							<td width="113" height="30" align="right" valign="middle">岗位：</td>
							<td width="193" align="left" valign="middle">
								<!--获取数据库中的岗位信息，并下拉框显示-->
								<select v-model="employmentInformation.station">

									<option value="营销推广">营销推广</option>

									<option value="销售代理">销售代理</option>

									<option value="采购材料">采购材料</option>

									<option value="市场调查">市场调查</option>

									<option value="创意总监">创意总监</option>

									<option value="设计员">设计员</option>

									<option value="检测员">检测员</option>

									<option value="人事经理">人事经理</option>

									<option value="后勤员">后勤员</option>

									<option value="总经理">总经理</option>

									<option value="副总经理">副总经理</option>

									<option value="经理助理">经理助理</option>

								</select>
								<!-------------------------------------->
								<font color="#FF0000">*</font><span id="jobspan"></span>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td width="96" height="30" align="right" valign="middle">入职日期：</td>
							<td width="188" align="left" valign="middle">
								<input type="date" style="border:1px solid #999;" v-model="employmentInformation.in_job_time" />
								<font color="#FF0000">*</font><span id="hiredatespan"></span>
							</td>
							<td width="113" height="30" align="right" valign="middle">参加工作日期：</td>
							<td width="193" align="left" valign="middle">
								<input type="date" style="border:1px solid #999;" v-model="employmentInformation.in_work_time" />
								<font color="#FF0000">*</font><span id="joindatespan"></span>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">用工形式：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.employment_form">
									<option value="正式员工"> 正式员工 </option>
									<option value="临时员工"> 临时员工 </option>
								</select>
								<font color="#FF0000">*</font>
								<span id="workformspan"></span>
							</td>
							<td height="30" align="right" valign="middle">人员来源：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.personnel_source">
									<option value="校园招聘"> 校园招聘 </option>
									<option value="社会招聘"> 社会招聘</option>
									<option value="其它"> 其它</option>
								</select>
								<font color="#FF0000">*</font><span id="sourcespan"></span>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">婚姻状况：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.marital_status">
									<option value="已婚"> 已婚 </option>
									<option value="未婚"> 未婚</option>
									<option value="丧偶"> 丧偶</option>
									<option value="离婚"> 离婚</option>
									<option value="保密"> 保密</option>
								</select>
							</td>
							<td height="30" align="right" valign="middle">政治面貌：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.political_outlook">
									<option value="党员"> 党员 </option>
									<option value="预备党员"> 预备党员</option>
									<option value="团员"> 团员</option>
									<option value="其他"> 其他</option>
								</select>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">电子邮件：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.email">
								<font color="#FF0000">*</font>
							</td>
							<td height="30" align="right" valign="middle">联系电话：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.tel">
								<font color="#FF0000">*</font><span id="phonespan"></span>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">民族：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.nationality" />
							</td>
							<td height="30" align="right" valign="middle">籍贯：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.native_place">
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">出生地：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.birth_place">
							</td>
							<td height="30" align="right" valign="middle">血型：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.blood_type">
									<option value="A型"> A型 </option>
									<option value="B型"> B型</option>
									<option value="AB型"> AB型</option>
									<option value="O型"> O型</option>
									<option value="其他血型"> 其他血型</option>
								</select>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">最高学历：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.education">
									<option value="高中及以下"> 高中及以下</option>
									<option value="大专"> 大专</option>
									<option value="本科"> 本科</option>
									<option value="研究生"> 研究生</option>
								</select>
								<font color="#FF0000">*</font><span id="maxeducationspan"></span>
							</td>
							<td height="30" align="right" valign="middle">最高学位：</td>
							<td align="left" valign="middle">
								<select v-model="employmentInformation.degrees">
									<option value="无学位"> 无学位 </option>
									<option value="学士"> 学士</option>
									<option value="双学士"> 双学士</option>
									<option value="硕士"> 硕士</option>
									<option value="博士"> 博士 </option>
									<option value="博士后"> 博士后</option>
								</select>
								<font color="#FF0000">*</font><span id="maxdegreespan"></span>
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">毕业院校：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.university">
							</td>
							<td height="30" align="right" valign="middle">所学专业：</td>
							<td align="left" valign="middle">
								<input type="text" v-model="employmentInformation.major">
							</td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="30" align="right" valign="middle">毕业日期：</td>
							<td align="left" valign="middle">
								<input type="date" style="border:1px solid #999;" v-model="employmentInformation.graduation_date" />
							</td>
							<td height="30" align="right" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">
								&nbsp;
							</td>
							<td>&nbsp;</td>
						</tr>
					</table>
					<br />
					<table width="550" border="0" cellspacing="0" cellpadding="0">
						<!-- <tr>
          <td width="110" rowspan="4">&nbsp;</td>
          <td width="131" align="center" valign="middle">名称</td>
          <td width="195" align="center" valign="middle">描述</td>
          <td width="114" rowspan="4">&nbsp;</td>
        </tr>
        <tr>
          <td height="30" align="center" valign="middle">试用期开始日期：</td>
          <td align="center" valign="middle"><input type="text" style="border:1px solid #999;" name="startdate"
          onClick="fPopCalendar(event,this,this)" 
          onFocus="this.select()" readonly="readonly" />
            <font color="#FF0000">*</font><span id="startdatespan"></span></td>
        </tr>
        <tr>
          <td height="30" align="center" valign="middle">试用期结束日期：</td>
          <td align="center" valign="middle"><input type="text" style="border:1px solid #999;" name="enddate"
          onClick="fPopCalendar(event,this,this)"
          onFocus="this.select()" readonly="readonly" />
            <font color="#FF0000">*</font><span id="enddatespan"></span></td>
        </tr> -->
						<tr>
							<td height="30" align="right" valign="bottom" style="padding-right:10px;">
								<button @click="addUser()">确定</button>
							</td>
							<td align="left" valign="bottom" style="padding-left:10px;"><input name="reset" type="button" value="重置" onclick="location.reload()" /></td>
						</tr>
					</table>
					<h3 style="color:red;"></h3>
				</form>

			</div>
		</div>

		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>

		<script>
			axios.defaults.baseURL = "http://176.55.4.113"
			const app = new Vue({
				el: "#app",
				data: {
					userList: [],
					employmentInformation: {
						id: "",
						user_name: "",
						gender: "男",
						birthday: "",
						height: "",
						id_card_number: "",
						department: "销售部",
						station: "营销推广",
						in_job_time: "",
						in_work_time: "",
						employment_form: "正式员工",
						personnel_source: "校园招聘",
						marital_status: "已婚",
						political_outlook: "党员",
						email: "",
						tel: "",
						nationality: "",
						native_place: "",
						birth_place: "",
						blood_type: "A型",
						education: "高中及以下",
						degrees: "无学位",
						university: "",
						major: "",
						graduation_date: ""
					}
				},
				methods: {
					addUser() {
						axios.post("/staff/add", this.employmentInformation).then(result => {
							console.log(result)
								if(result.data.status == 200){
									alert("员工新增成功")
								}else{
									alert("员工新增失败")
								}
						})
					}
				}
			})
		</script>
	</body>

</html>